<template id="common">
    <div>
         <div class="orange_list">
                <dl>
                    <dt>
                        <img src="../image/orange_l.jpg" alt="" @click="getDetail()">
                    </dt>
                    <dd>南非佳沛葡萄柚...</dd>
                    <dd><span>￥19.9/2个</span><img src="../image/add.jpg" alt=""></dd>
                </dl>
                <dl>
                    <dt>
                        <img src="../image/orange_l.jpg" alt="">
                    </dt>
                    <dd>南非佳沛葡萄柚...</dd>
                    <dd><span>￥19.9/2个</span><img src="../image/add.jpg" alt=""></dd>
                </dl>
                <dl>
                    <dt>
                        <img src="../image/orange_l.jpg" alt="">
                    </dt>
                    <dd>南非佳沛葡萄柚...</dd>
                    <dd><span>￥19.9/2个</span> <img src="../image/add.jpg" alt=""></dd>
                </dl>

            </div>
    </div>
</template>
<script>
    export default{
        name:'common',
        methods:{
            getDetail:function(){
                this.$router.push('/shopDetails');
               /* alert('1')*/
            }
        }
    }

</script>
<style>
    .orange_list{
        height:2.20rem;
        width:100%;
        display:flex;
    }
    .orange_list dl{
        height:2.20rem;
        width:2.11rem;
        float:left;
        flex:1;
    }
    .orange_list dl dt{
        height:1.28rem;
        width:2.11rem;
    }
    .orange_list dl dd:nth-of-type(1){
        height:0.46rem;
        width:2.11rem;
        color:#333;
        font-size:0.2rem;
        text-align:center;
        line-height:0.46rem;
        overflow: hidden; /*自动隐藏文字*/
        text-overflow: ellipsis;/*文字隐藏后添加省略号*/
        white-space: nowrap;/*强制不换行*/
    }
    .orange_list dl dd:nth-of-type(2){
        width:2.11rem;
        height:0.46rem;
        position: relative;


    }
    .orange_list dl dd:nth-of-type(2) span{
        color:#ff7e67;
        font-size:0.12rem;
        display:block;
        margin-left:12px;
    }
    .orange_list dl dd:nth-of-type(2) img{
        display:block;
        height:0.23rem;
        width:0.23rem;
        position:absolute;
        top:-1px;
        left:1.5rem;
    }
    .orange_list dl dt img{
        height:1.28rem;
        width:2.11rem;
        display:block;
    }
</style>
